<template>
    <!-- 最外层只能有一个组件，不能出现多个 -->
    <div class="demo-basic-vueStudyChild-eventDemo">

        <!-- 显示JavaScript代码 -->
        <pre>
            <code class="javascript" v-text="jsCode">
            </code>
        </pre>
        <!-- 显示HTML代码 -->
        <pre>
            <code class="html" v-text="htmlCode">
            </code>
        </pre>

        <p>
        <div>说明：</div>
        <div>
            <div>1、使用“v-on”指令</div>
            <div>2、使用“@”代替“v-on”指令</div>
        </div>
        </p>

    </div>
</template>

<script>
    import hljs from 'highlight.js'

    export default {
        // 组件被挂载的时候执行的方法
        mounted: function () {
            window.setTimeout(function () {
                $('.demo-basic-vueStudyChild-eventDemo pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 200);
        },
        data: function () {
            return {
                counter: 0,

                htmlCode: '' +
                '<button v-on:click="counter += 1">增加 1</button>\n' +
                '<p>这个按钮被点击了 {{ counter }} 次。</p>\n' +
                '<button @click="myFunc($event)">@是v-bind的简写</button>\n' +
                '<button @click="myFunc">@是v-bind的简写</button>',

                jsCode:'' +
                'export default {\n' +
                '\tdata: function () {\n' +
                '\t\treturn {\n' +
                '\t\t\tcounter: 0,\n' +
                '\t\t}\n' +
                '\t},\n' +
                '\tmethods: {\n' +
                '\t\tmyFunc: function (eventObj) {\n' +
                '\t\t\talert(\'myFunc\')\n' +
                '\t\t\tconsole.dir(eventObj)\n' +
                '\t\t}\n' +
                '\t}\n' +
                '}',
            }
        },
        methods: {
            myFunc: function (eventObj) {
                alert('myFunc')
                console.dir(eventObj)
            }
        }
    }
</script>

<style scoped lang="scss">
    /***
    scoped ： 表示当前写的样式是针对当前页面的，对其他页面没有影响
    lang="scss": 表示我写的样式代码是针对SASS的，不是less等。强调，属性的值是scss
    ***/
</style>


